<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加订单</title>

    <!--公用css引用-->
    <?php include 'include/style.php';?>
    <!--END/公用css引用-->
    <link rel="stylesheet" href="../css/confirm-order.css">
</head>
<body>

<!--公共头部-->
<?php include 'include/header-noNav.php';?>
<!--END/公共头部-->


<!--面包屑-->
<div class="inbox hr">
    <div class="crumbs-nav fn-mt20">
        <span>您的位置：</span>
        <a class="link" href="/">首页 &gt;</a>
        <a class="link" href="/">我的订单 &gt;</a>
        <a class="link" href="/">未付款订单</a>
    </div>
</div>
<!--END/面包屑-->


<!--步骤-->
<div class="inbox step-by-step order-step">
    <div class="gray-line"></div>
    <div class="success-line" style="width: 100%;"></div>
    <div class="before-line" style="width: 75%;"></div>
    <ul class="step-list ui-cols-4">
        <li class="step col step-before">
            <i class="icon icon-step">1</i>
            <div class="txt">提交订单</div>
            <div class="txt fn-mt4">2016-1-7 12:58:23</div>
        </li>
        <li class="step col step-before">
            <i class="icon icon-step">2</i>
            <div class="txt">付款成功</div>
        </li>
        <li class="step col step-before">
            <i class="icon icon-step">3</i>
            <div class="txt">仓库发货</div>
        </li>
        <li class="step col step-cur">
            <i class="icon icon-step">4</i>
            <div class="txt">确认收货</div>
        </li>
    </ul>
</div>
<!--END/步骤-->

<!--状态-->
<div class="inbox order-details ui-brd-box1">
    <div class="order-info">
        <div class="h"><strong>订单详情</strong></div>
        <ul class="info-list">
            <li class="item">
                <div class="param-name">收货地址：</div>
                <div class="param-detail">申长伟，18703644856 <br> 河南省 郑州市 中原区 中原西路街道中原路82号中晟银泰国际中心27层2703室（中原万达对面），450007</div>
            </li>
            <li class="item">
                <div class="param-name">买家留言：</div>
                <div class="param-detail">-</div>
            </li>
            <li class="item item-line"></li>
            <li class="item">
                <div class="param-name">订单编号：</div>
                <div class="param-detail">1534275709431535</div>
            </li>
            <li class="item">
                <div class="param-name">成交时间：</div>
                <div class="param-detail">2016-01-06 19:04:22</div>
            </li>
            <li class="item">
                <div class="param-name">付款时间：</div>
                <div class="param-detail">2016-01-06 19:04:22</div>
            </li>
            <li class="item">
                <div class="param-name">发货时间：</div>
                <div class="param-detail">2016-01-06 19:04:22</div>
            </li>
            <li class="item">
                <div class="param-name">完结时间：</div>
                <div class="param-detail">2016-01-06 19:04:22</div>
            </li>
            <li class="item">
                <div class="param-name">商<span class="fn-ml20">&nbsp;</span>家：</div>
                <div class="param-detail">
                    <a href="#" class="link">阿福易购</a>
                    <a href="#" title="联系客服">
                        <i class="service icon icon-qq-blue-sm"></i>
                    </a>
                </div>
            </li>

        </ul>

    </div>

    <div class="order-status">

        <div class="status-info fn-rel">
<!--            <i class="icon icon-order-status icon-ord-st-warning"></i>-->
<!--            <i class="icon icon-order-status icon-ord-st-pay"></i>-->
<!--            <i class="icon icon-order-status icon-ord-st-express"></i>-->
            <i class="icon icon-order-status icon-ord-st-ok"></i>
            <span class="text fn-dib">订单状态：交易成功</span>

            <ul class="ul">
                <!--成功提示-->
                <li>
                    物流： 申通快递运单号:220633240846 <br>
                    2016-01-03 13:29:53 <span class="text-color-5 fn-ml10">已签收,签收人是本人</span>
                </li>

                <!--取消订单提示-->
                <li>
                    关闭类型：买家取消订单
                </li>
                <li>
                    原因：我不想买了
                </li>

                <!--未支付提示-->
                <li>
                    还有 <strong class="js-countDown time-count-down fn-dib">30分0秒</strong> 来付款,超时订单自动关闭
                </li>
            </ul>
        </div>

        <div class="status-opts fn-mt20">
            <span class="label">您可以</span>

            <a href="#" class="fn-btn btn-primary btn-radius fn-btn-small">评价</a>

            <a href="#" class="link js-cancel">取消订单</a>
        </div>


    </div>
</div>
<!--END/状态-->

<!--商品列表-->
<div class="inbox order-goods-list">
    <table class="bl-table bl-table-brdli table-tc o-g-list">
        <thead>
        <tr>
            <td colspan="2" style="width: 360px;">商品</td>
            <td style="width: 80px;">单价</td>
            <td style="width: 50px;">数量</td>
            <td style="width:100px;">状态</td>
            <td>运费</td>
        </tr>
        </thead>

        <tbody>

        <tr data-id="1">
            <td class="goods-info" colspan="5">
                <div class="fn-rel fn-tl express-wrap">
                    <span class="package-detail">包裹1</span>
                    <span class="package-detail">申通快递</span>
                    <span class="package-detail">运单号:220633240846</span>
                    <span class="package-detail text-color-5">2016-01-03 13:29:53 已签收,签收人是本人</span>
                    <span class="package-address-detail fn-rel fn-dib">
                        <a href="javascript:;">更多<i class="icon icon-arrow-b1"></i></a>
                        <?php include 'include/express.php';?>
                    </span>
                </div>
                <table class="ui-100">
                    <tr>
                        <td class="pic tl ui-nobrd-t">
                            <a href="#">
                                <img class="goods-img" src="../images/classify/pic-14.jpg" alt="描述">
                            </a>
                        </td>
                        <td class="tl name" style="width:620px;">
                            <p class="name"><a class="link" href="#">全棉个性四件套 纯棉简约床单床品套件1.5与1.8床通用被套2*2.3m</a></p>
                            <p class="fn-mt4 text-color-1">关税：￥<span class="js-gs">15</span></p>
                        </td>
                        <td style="width: 100px;">
                            <span>￥228</span>
                        </td>
                        <td style="width:50px;">
                            <span>1</span>
                        </td>
                        <td class="ui-brd-l" style="width: 100px;">
                            <span>已完成</span>
                            <br>
                            <a href="#" class="text-color-1 link">写评价</a>
                        </td>
                    </tr>
                </table>
            </td>
            <td class="ui-brd-l">
                <span class="text-color-1">￥8</span>
            </td>
        </tr>
        <tr data-id="2">
            <td class="goods-info" colspan="5">
                <table class="ui-100">
                    <tr>
                        <td class="pic tl ui-nobrd-t">
                            <a href="#">
                                <img class="goods-img" src="../images/classify/pic-14.jpg" alt="描述">
                            </a>
                        </td>
                        <td class="tl name" style="width:620px;">
                            <p class="name"><a class="link" href="#">全棉个性四件套 纯棉简约床单床品套件1.5与1.8床通用被套2*2.3m</a></p>
                            <p class="fn-mt4 text-color-1">关税：￥<span class="js-gs">15</span></p>
                        </td>
                        <td style="width: 100px;">
                            <span>￥228</span>
                        </td>
                        <td style="width: 50px;">
                            <span>1</span>
                        </td>
                        <td class="ui-brd-l" style="width: 100px;">
                            <span>已关闭</span>
                            <br>
                            <a href="#" class="text-color-1 link">重新购买</a>
                        </td>
                    </tr>
                </table>
            </td>
            <td class="ui-brd-l">
                <span class="text-color-1">￥8</span>
            </td>
        </tr>

        </tbody>

        <tfoot>
        <tr>
            <td colspan="6">
                <div class="o-sel-sub fn-tr">
                    <p>
                        <span class="label">商品件数：</span>
                        <span class="fn-dib val">2件</span>
                    </p>

                    <p>
                        <span class="label">金额合计：</span>
                        <span class="fn-dib val">￥69.00</span>
                    </p>

                    <p>
                        <span class="label">关税：</span>
                        <span class="fn-dib val">￥6.90</span>
                    </p>

                    <p>
                        <span class="label">运费：</span>
                        <span class="fn-dib val">￥0.00</span>
                    </p>

                    <p class="total-num">
                        <span class="label">实付金额：</span>
                        <span class="fn-dib val">￥228.00</span>
                    </p>
                </div>
            </td>
        </tr>
        </tfoot>
    </table>
</div>
<!--END/商品列表-->


<div class="inbox">
    <!--猜你喜欢-->
    <div class="recommend-list">
        <div class="list-head fn-mb16">
            <div class="tit tit-4">
                <h3 class="h fn-mr10">
                    猜你喜欢
                </h3>
                <div class="more fn-fl fn-mt4">
                    根据您的浏览记录推荐的商品
                </div>
                <a href="#" class="more"><i class="icon icon-load1"></i>换一批</a>
            </div>
        </div>
        <div class="list-body">
            <ul class="bl-imglist imglist-5col">
                <li>
                    <div class="col-space">
                        <a href="#">
                            <img src="../images/classify/pic-10.jpg" alt="">
                            <p class="name">【Innisfree】  浓缩精华液</p>
                        </a>
                        <p class="price"><span>1216</span>元</p>
                    </div>
                </li>
                <li>
                    <div class="col-space">
                        <a href="#">
                            <img src="../images/classify/pic-10.jpg" alt="">
                            <p class="name">【Innisfree】  浓缩精华液</p>
                        </a>
                        <p class="price"><span>1216</span>元</p>
                    </div>
                </li>
                <li>
                    <div class="col-space">
                        <a href="#">
                            <img src="../images/classify/pic-10.jpg" alt="">
                            <p class="name">【Innisfree】  浓缩精华液</p>
                        </a>
                        <p class="price"><span>1216</span>元</p>
                    </div>
                </li>
                <li>
                    <div class="col-space">
                        <a href="#">
                            <img src="../images/classify/pic-10.jpg" alt="">
                            <p class="name">【Innisfree】  浓缩精华液</p>
                        </a>
                        <p class="price"><span>1216</span>元</p>
                    </div>
                </li>
                <li>
                    <div class="col-space">
                        <a href="#">
                            <img src="../images/classify/pic-10.jpg" alt="">
                            <p class="name">【Innisfree】  浓缩精华液</p>
                        </a>
                        <p class="price"><span>1216</span>元</p>
                    </div>
                </li>

            </ul>
        </div>
    </div>
    <!--END/猜你喜欢-->
</div>

<!--公共尾部-->
<?php include 'include/footer.php'; ?>
<!--END/公共尾部-->

<!--公用js引用-->
<?php include 'include/script.php'; ?>
<!--END/公用js引用-->

<!--<script src="../js/"></script>-->
<script>
/*    d: d + "天",
        h: h + "小时",
        m: m + "分",
        s: s + "秒",
        "d:h:m:s": d + "天" + h + "小时" + m + "分" + s + "秒",
        "h:m:s": h + "小时" + m + "分" + s + "秒",
        "m:s": m + "分" + s + "秒"*/
    tools.buttonCountdown($('.js-countDown'),1000*60*30,'m:s','',function(){
       window.location.reload();
    });
</script>
</body>
</html>